<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="aui-fullpage">
  <div class="aui-header-1">
    <lv-group lvGutter="8px">
      <h1>{{ 'common_export_query_label' | i18n }}</h1>
      <aui-multi-cluster-switch (onChange)="onChange()"></aui-multi-cluster-switch>
    </lv-group>
  </div>
  <div class="aui-block aui-paginator-container">
    <lv-alert lvType="info" [lvClosable]="false" *ngIf="!!exportQueryTips">
      {{exportQueryTips}}
    </lv-alert>
    <div class="aui-operation">
      <button lv-button [disabled]="disableBtn" (click)="batchDelete()">
        {{ 'common_delete_label' | i18n }}
      </button>
      <lv-group [lvGutter]="groupCommon.middleRowGutter">
        <lv-search [lvFocus]="true" [(ngModel)]="fileName" (lvSearch)="searchByName($event)"
          lvPlaceHolder="{{ 'common_search_type_label' | i18n: [''] }}">
        </lv-search>
        <button class="aui-button-icon" lv-button lvSize="auto" (click)="getDatas()">
          <i lv-icon="lv-icon-refresh" [lvColorState]="true"></i>
        </button>
      </lv-group>
    </div>
    <div class="list-container">
      <lv-datatable [lvData]="data" lvSelectionMode="multiple" [(lvSelection)]="selection" lvCompareWith="id"
        (lvSelectionChange)="selectionChange()" (lvSortChange)="sortChange($event)" [lvPaginator]="page" lvSort #lvTable
        lvAsync lvResize lvResizeMode="expand" [lvScroll]="{ x: '100%' }">
        <thead>
          <tr>
            <th width="40px" *ngIf="!nonClient"></th>
            <th lvShowCheckbox width="40px" [lvRowsData]="lvTable.renderData"></th>
            <ng-container *ngFor="let col of columns">
              <th [lvShowFilter]="col.filter" (lvFilterChange)="filterChange($event)" [(lvFilters)]="col.filterMap"
                lvCellKey="{{ col.key }}" [attr.width]="col.width" [lvShowSort]="col.showSort" lvShowCustom
                *ngIf="!col.hidden" lvFilterCheckAll>
                {{ col.label }}
                <div lvCustom *ngIf="col.key === 'fileName'">
                  <aui-custom-table-search (search)="searchByName($event)"
                    [filterTitle]="fileName"></aui-custom-table-search>
                </div>
              </th>
            </ng-container>
            <th width="144px">
              {{ 'common_operation_label' | i18n }}
            </th>
          </tr>
        </thead>
        <tbody>
          <ng-container *ngFor="let item of lvTable.renderData; trackBy: trackById">
            <tr>
              <td [lvShowUnfold]="item.type === 'AGENT_LOG'" [(lvUnfold)]="item.expand"
                (lvUnfoldChange)="getSubData(item)" *ngIf="!nonClient"></td>
              <td lvShowCheckbox [lvRowData]="item"></td>
              <ng-container *ngFor="let col of columns">
                <td *ngIf="!col.hidden">
                  <ng-container [ngSwitch]="col.key">
                    <ng-container *ngSwitchCase="'type'">
                      <span lv-overflow>
                        {{ item.type | textMap: isCyberEngine?'exportCyberLogType':'exportLogType' }}
                      </span>
                    </ng-container>
                    <ng-container *ngSwitchCase="'status'">
                      <lv-group lvGutter="5px">
                        <aui-status [value]="item.status" type="Export_Query_Status">
                        </aui-status>
                        <ng-container
                          *ngIf="[dataMap.Export_Query_Status.fail.value].includes(item.status) && item.errorCode">
                          <i lv-icon="aui-icon-reasons" [lvColorState]="true"
                            lvTooltipPosition="right" [lv-tooltip]="errorCodeTpl"></i>
                          <ng-template #errorCodeTpl>
                            <span [innerHTML]="item.errorCode | i18n:item.errorParams"></span>
                          </ng-template>
                        </ng-container>
                      </lv-group>
                    </ng-container>
                    <ng-container *ngSwitchCase="'size'">
                      <span lv-overflow>
                        {{
                        item.size
                        | capacityCalculateLabel
                        : '1.1-3'
                        : unitconst.BYTE
                        : true
                        }}
                      </span>
                    </ng-container>
                    <ng-container *ngSwitchDefault>
                      <span lv-overflow>
                        {{ item[col.key] | nil }}
                      </span>
                    </ng-container>
                  </ng-container>
                </td>
              </ng-container>
              <td width="144px">
                <lv-operation-menu [lvItemsFn]="optsCallback" [lvData]="item"></lv-operation-menu>
              </td>
            </tr>

            <tr *ngIf="item.expand" lvInnerUnfold>
              <td colspan="10" lvInnerUnfold>
                <lv-pro-table #dataTable [config]="tableConfig" [data]="item.tableData"></lv-pro-table>
              </td>
            </tr>
          </ng-container>
        </tbody>
      </lv-datatable>
    </div>
    <div class="aui-paginator-wrap">
      <lv-paginator [lvTotal]="total" [lvPageIndex]="startPage" [lvPageSize]="pageSize" #page [hidden]="!total"
        (lvPageChange)="pageChange($event)">
      </lv-paginator>
    </div>
  </div>
</div>

<ng-template #sizeTpl let-item>
  <span lv-overflow>
    {{
    item.size
    | capacityCalculateLabel
    : '1.1-3'
    : unitconst.BYTE
    : true
    }}
  </span>
</ng-template>


<ng-template #statusTpl let-item>
  <lv-group lvGutter="5px">
    <aui-status [value]="item.status" type="exportLogStatus">
    </aui-status>

    <ng-container *ngIf="
  [exportQueryStatus.fail.value].includes(item.status)
  ">
      <i lv-icon="aui-icon-help" [lvColorState]="true"  lvTooltipPosition="right"
        [lv-tooltip]="errorCodeTpl"></i>
      <ng-template #errorCodeTpl>
        <span [innerHTML]="
      item.errorCode | i18n: item.errorParams || []
    "></span>
      </ng-template>
    </ng-container>
  </lv-group>

</ng-template>
